<template>
    <div class="work-place">
      <a-row style="margin: 0 -32px;">
        <a-col style="padding: 0 4px" :xxl="16" :xl="4" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="card" :title="'设备分类'">
            <rose-pie></rose-pie>
          </a-card>
          <a-card class="card" :title="'设备状态'">
            <race-bar :data="this.raceData"/>
          </a-card>
        </a-col>
        <!--      地图-->
        <a-col style="padding: 0 4px" :xxl="16" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="card" :loading="loading" :title="$t('map')" :bordered="false">
            <MainMap class="map"></MainMap>
          </a-card>
        </a-col>
        <a-col style="padding: 0 4px" :xxl="4" :xl="4" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="card" :loading="loading" :title="'设备总览'" :bordered="false" style="margin-bottom: 16px">
            <a-card-meta class="card-meta" title="数据总量" :description="this.statistics" style="margin-bottom: 8px">
              <a-avatar
                  slot="avatar"
                  src="https://img95.699pic.com/element/40027/7586.png_860.png"
              />
            </a-card-meta>
            <a-card-meta class="card-meta" title="设备总数" :description="Math.round(this.statistics/100)" style="margin-bottom: 8px">
              <a-avatar
                  slot="avatar"
                  src="http://ku.90sjimg.com/element_pic/18/07/09/e7868afd31a6676f2fa5c793ae77c483.jpg"
              />
            </a-card-meta>
            <a-card-meta class="card-meta" title="监控时长" :description="this.duration">
              <a-avatar
                  slot="avatar"
                  src="https://img.php.cn/upload/article/000/000/004/71c20d75ca0c03490c20bafff595ff86.jpg"
              />
            </a-card-meta>
          </a-card>
          <a-card class="card" :loading="loading" :title="'负载监控'" :bordered="false">
            <home-page-monitor :statisticsTest="this.statisticsTest" :energy="this.energyTest"></home-page-monitor>
          </a-card>
        </a-col>
      </a-row>
      <a-row style="margin: 8px -24px">
        <a-col style="padding: 4px 4px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <!--          便捷导航-->
          <a-card class="card" :title="$t('access')" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
            <div class="item-group">
              <a href="#/dashboard/workplace">主页</a>
              <a href="/#/dashboard/analysis/">分析页</a>
              <a href="#/details/advance">设备详情</a>
              <a href="#/details/basic">平台详情</a>
              <a-button size="small" type="primary" ghost icon="plus" @click="testMsg">待添加</a-button><!--{{$t('add')}}-->
            </div>
          </a-card>
        </a-col>
        <a-col  style="padding: 4px 4px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <!--          团队-->
          <a-card class="card" :loading="loading" :title="$t('team')" :bordered="false">
            <div class="members">
              <a-row>
                <a-col :span="6" v-for="(item, index) in teams" :key="index">
                  <a>
                    <a-avatar size="small" :src="item.avatar" />
                    <span class="member">{{item.name}}</span>
                  </a>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import {request, METHOD} from '@/utils/request'
import MainMap from "@/pages/components/MainMap";
import axios from "axios"
import {format} from 'date-fns'
import HomePageMonitor from "@/pages/components/echarts/HomePageMonitor";
import cover from "../../../evntBus";
import RosePie from "@/pages/components/echarts/RosePie";
import RaceBar from "@/pages/components/echarts/RaceBar";

export default {
  name: 'WorkPlace',
  components: {RaceBar, RosePie, HomePageMonitor, MainMap},// HeadInfo PageLayout
  // 记录了各个变量实际信息
  i18n: require('./i18n'),

  data () {
    return {
      tablename: "datas",
      timer: null,
      title: "实时监控地图",
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      raceData: [52, 81, 23, 10, 32],
      welcome: {
        timeFix: '',
        message: ''
      },
      // 井盖个数
      coverCount: 2,
      // 数据总量
      statistics: 233,
      statisticsTest: 1,
      // 测试用负载水波图数据
      energyTest: 0.6,
      // 地图下方卡片标题
      cardTitle: ["温度/ ℃", "湿度/ %rh", "一氧化碳浓度/ mg/m³", "甲烷浓度/ mg/m³", "是否倾斜/ Boolean", "电量/ %"],
      // 实体井盖,先写好需要占位的信息，获取到会覆盖的
      cover: {
        deviceName: '测试设备一号',
        time: '04-01/11:28:46',
        temp: '22',
        hum: "23",
        co: "2.6",
        ch4: "1.5",
        pitch: "0.25",
        roll: "1.0"
      },
      // 数据是否获取完成
      dataComplete: false,
      // 监控时长
      duration: format(new Date(), "HH:mm:ss:SSS")
    }
  },
  computed: {
    ...mapState('account', {currUser: 'user'}),
    ...mapState('setting', ['lang']),
    coverMsg: function () {
      // 因为数值为0时信息不显示，所以修改一下获取到零值时的显示方式
      let pitch, roll
      this.cover.pitch === 0 ? pitch = "0.0" : pitch = this.cover.pitch
      this.cover.roll === 0 ? roll = "0.0" : roll = this.cover.roll
      return [this.cover.temp, this.cover.hum, this.cover.co, this.cover.ch4, pitch, roll]
    }
  },
  created() {
    // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器mg/m³
    clearInterval(this.timer)
    this.timer = null
    this.setTimer()

    request('/user/welcome', METHOD.GET).then(res => this.welcome = res.data)
    request('/work/activity', METHOD.GET).then(res => this.activities = res.data)
    request('/work/team', METHOD.GET).then(res => this.teams = res.data)
    request('/project', METHOD.GET).then(res => {
        this.projects = res.data
        this.loading = false
      })
    // 获取数据总数已在下方函数中
    // 获取最新信息
    this.getNewMsg()
  },
  mounted() {
    let self=this;
    cover.$on("sentCoverNameEvent", function (whatname) {
      self.tablename = whatname;
    });
  },
  methods: {
    // 定时器，定时3秒触发一次
    setTimer() {
      if(this.timer == null) {
        this.timer = setInterval( () => {
          // 此处写需要定时触发的行为
          this.getNewMsg()
          this.randomData()
          // 将获取到为0的数值改为0.0防止识别为空不显示
          for(let i = 0; i < this.coverMsg.length; i++) {
            if(this.coverMsg[i] === 0) {
              this.coverMsg[i] = "0.0"
            }
          }
      // this.coverCount++
        }, 3000)
      }
    },
    getNewMsg() {
      axios.get("http://119.3.218.80:8080/getLatestOne?tablename="+this.tablename, {timeout: 2000})
          .then(res => {
            Object.assign(this.cover, res.data)
            // this.cover = res.data
            let timeString = new Date(res.data.time).getTime()
            this.cover.time = format(new Date(timeString), "HH:mm:ss")
            this.dataComplete = true
          })
          .catch(function (error) {
            // handle error
            console.log(error)
            this.$message.error('访问后端失败，请检查网络连接');
            this.dataComplete = false
          })
      axios.get("http://119.3.218.80:8080/getCount?tablename="+this.tablename)
          .then(response => {
            this.statistics = response.data
          })
          .catch(err => {
            console.log(err)
            this.$message.error('访问后端失败，请检查网络连接');
          })
    },
    testMsg() {
      this.cover.co++
      console.log(this.cover.co)
      console.log("WorkPlacetest:"+this.tablename)
    },
    // 随机向主页地图两侧添加数据动态显示
    randomData() {
      this.statisticsTest = Math.round(Math.random() * (10 - 1) + 1)
      this.energyTest = Math.random() * 0.4 + 0.1
      let length = this.raceData.length
      for(let i = 0; i < length; i++) {
        this.raceData[i] = Math.round(Math.random() * 100 + 1)
      }
    },
  },
  beforeDestroy() {
    // 每次离开当前界面时，清除定时器
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="less">
@import "index";
.cover-img {
  vertical-align: middle;
  text-align: center;
}
.card {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
#list-card {
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.card-meta {
  color: #13C2C2;
}
.map {
  background-color: #1f1f1f;
}
</style>
